{% extends 'base.html' %}

{% block breadcrumb_current %}
    公共参数 > 县区列表
{% endblock %}

{% block content %}

    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            县区列表
            <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm float-end" style="margin-left: 15px;">返回首页</a>
            {% if user.is_manager %}
            <a href="{% url 'department_add' %}" class="btn btn-secondary btn-sm float-end">新增县区</a></h5>
            {% endif %}
        </div>

<div class="container mt-4">
    <!-- 表格展示，初始隐藏 -->
    <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
        <thead>
            <tr>
                <th>县区名称</th>
                <th><i class="fa-solid fa-pen-to-square me-2"></i>编辑</th>
                <th><i class="fa-solid fa-trash-can"></i>删除</th>
            </tr>
        </thead>
        <tbody>
            {% for department in departments %}
            <tr class="custom-row-color">
                <td>{{ department.department }}</td>
                <td><a href="{#}" class="text-info text-decoration-none">编辑</a></td>
                <td><a href="{#}" class="text-danger text-decoration-none" onclick="return confirm('确定要删除{{department.department}}吗？')">删除</a></td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="4" class="text-center">暂无县区信息</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 卡片展示，初始隐藏 -->
    <div id="mobile-view" style="display: none;">
        {% for department in departments %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ department.department }}</h5>
                <a href="{#}" class="btn btn-primary me-2">
                    <i class="fa-solid fa-pen-to-square me-2"></i>编辑
                </a>
                <a href="{#}" class="btn btn-danger" onclick="return confirm('确定要删除{{department.department}}吗？')">
                    <i class="fa-solid fa-trash-can"></i>删除
                </a>
            </div>
        </div>
        {% empty %}
        <div class="card mb-3">
            <div class="card-body text-center">
                暂无县区信息
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 设备检测脚本 -->
    <script>
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const desktopView = document.getElementById('desktop-view');
            const mobileView = document.getElementById('mobile-view');

            if (isMobile()) {
                mobileView.style.display = 'block';
            } else {
                desktopView.style.display = 'table';
            }
        });
    </script>
</div>
{% endblock %}